
import React, { Component } from "react";
import "../../asserts/styles/todoList/add.scss";
import { Input } from 'antd';
import { MenuUnfoldOutlined } from '@ant-design/icons';

class AddTodo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputVal: ''
    };
  }
  changeVal = e => {
    this.setState({ inputVal: e.target.value });
  };
  addTodo = e => {
    this.props.onAdd(e.target.value);
    this.setState({ inputVal: '' });
  };

  render() {
    // let { inputVal } = this.state;   避免申请太多的变量吧
    // 为了赶进度，有些代码片段是参考网上的，代码写的太差了=-=，
    // 好多不必要的操作，细看之下，自己都觉得太坑了。。。 
    // 感谢瑞子姐细心review代码
    return (
      <div className="wrap">
        <div className="wrap-line">
          <span className="input-group-addon">
            <MenuUnfoldOutlined className="wrap-icon" />
          </span>
          <Input
            placeholder="What needs to be done?"
            value={this.state.inputVal}
            onChange={this.changeVal}
            onPressEnter={this.addTodo}
          />
        </div>
      </div>
    );
  }
}

export default AddTodo;
